<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 06 详情页  圆形放大</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .box {
            width: 80%;
            margin: 10px auto;
        }

        .box .left {
            float: left;
            width: 400px;
            height: 600px;
            position: relative;
        }

        .box .big {
            position: absolute;
            left: 450px;
            top: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
        }

        .box .left .big .bigimg{
            width: 800px;
            height: 800px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }


        .box .left .top {
            width: 400px;
            height: 400px;
            position: relative;
        }

        .box .left .top .smallimg {
            width: 400px;
            height: 400px;
        }

        .box .left .top .shadow {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(97, 94, 94, 0.5);
            
        }
        .left .bottom{
            height: 150px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .left .item{
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="box" class="box">
            <div class="left" id="left">
                <div class="top" id="top" @mousemove="move" @mouseover="over" @mouseout="out">
                    <img :src="img" alt=""   class="smallimg">
                    
                    <div class="shadow" id="shadow" :style="shadowstyle" v-show="shadowflag"></div>
                    <div class="big" id="big" v-show="shadowflag" :style="bigstyle">
                        <img :src="bigimg"
                            alt="" id="bigimg" :style="bigimgstyle" class="bigimg">
                    </div>
                </div>
                <div class="bottom">
                    <div class="item" @mouseover="smallimgover('https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_100x100.jpg')">
                        <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_100x100.jpg" alt="">
                    </div>
                    <div class="item" @mouseover="smallimgover('https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01Pv9jDs1Sdhkgbog3T_!!71202270.jpg_100x100.jpg')">
                        <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01Pv9jDs1Sdhkgbog3T_!!71202270.jpg_100x100.jpg" alt="">
                    </div>
                    <div class="item"  @mouseover="smallimgover('https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_100x100.jpg')">
                        <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_100x100.jpg" alt="">
                    </div>
                </div>

            </div>
        </div>

    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            shadowflag: false,
            shadowstyle: "",
            bigimgstyle: "",
            bigstyle: "",
            img: "https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg",
            bigimg: "https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_800x800.jpg",

        },
        mounted() {
            // 获取元素
            this.leftDiv = document.getElementById("left")
            this.topDiv = document.getElementById("top");
            this.shadowDiv = document.getElementById("shadow");
            this.bigimgDiv = document.getElementById("bigimg");
            this.bigDiv = document.getElementById("big");

            // left到左边视口的距离
            this.left = this.leftDiv.offsetLeft;
            this.top = this.leftDiv.offsetTop;

            // top的宽度
            this.topDivWidth = this.topDiv.offsetWidth;


            // shadow的宽度
            // this.shadowDivWidth = this.shadowDiv.offsetWidth;
            this.shadowDivWidth = parseFloat(window.getComputedStyle(this.shadowDiv)["width"]);

            //bigimg宽度
            // this.bigimgDivWidth = this.bigimgDiv.offsetWidth;
            this.bigimgDivWidth = parseFloat(window.getComputedStyle(this.bigimgDiv)["width"]);

            // 获取big的宽度
            this.bigDivWidth = parseFloat(window.getComputedStyle(this.bigDiv)["width"]);


        },
        methods: {
            // 鼠标移入小图  
            smallimgover(src){
                this.img = src.replace("100x100","400x400");
                this.bigimg = src.replace("100x100","800x800");
            },



            // 鼠标划入后显示
            over(){
                this.shadowflag = true;
            },

            // 鼠标离开后隐藏
            out(){
                this.shadowflag = false;
            },

            move() {

                // let clientX = window.event.clientX;
                // let clientY = window.event.clientY;


                let clientX = window.event.pageX;
                let clientY = window.event.pageY;

                let x = clientX - this.left - this.shadowDivWidth / 2;
                let y = clientY - this.top - this.shadowDivWidth / 2


                // shadow最大定位
                let max = this.topDivWidth - this.shadowDivWidth;

                if (x <= 0) {
                    x = 0;
                }
                if (x >= max) {
                    x = max;
                }
                if (y <= 0) {
                    y = 0;
                }
                if (y >= max) {
                    y = max;
                }

                let bigX = x * this.bigimgDivWidth / this.topDivWidth;
                let bigY = y * this.bigimgDivWidth / this.topDivWidth;

                let bigDivX = x - (this.bigDivWidth - this.shadowDivWidth)/2;
                let bigDivY = y - (this.bigDivWidth - this.shadowDivWidth)/2;

                this.shadowstyle = {
                    left: x + "px",
                    top: y + "px",
                }

                this.bigimgstyle = {
                    left: -bigX + "px",
                    top: -bigY + "px",
                }

                this.bigstyle = {
                    left: bigDivX + "px",
                    top: bigDivY + "px",
                }





            }

        },
        watch: {

        }
    })





</script>




</html>